<template>
  <Dialog v-model="dialogVisible" title="分配客户" width="80%" class="customer-distribute-dialog">
    <div class="dialog-content">
      <!-- 头部区域 -->
      <div class="dialog-header">
        <div class="header-icon">
          <Icon icon="ep:user-filled" />
        </div>
        <div class="header-content">
          <h3 class="dialog-title">分配客户</h3>
          <p class="dialog-subtitle">选择负责人并配置分配方式</p>
        </div>
      </div>

      <!-- 表单区域 -->
      <div class="form-container">
        <el-form
          ref="formRef"
          v-loading="formLoading"
          :model="formData"
          label-width="120px"
          class="enhanced-form"
        >
          <!-- 负责人选择 -->
          <div class="owner-section">
            <div class="section-header">
              <Icon icon="ep:user" class="section-icon" />
              <span class="section-title">负责人选择</span>
            </div>

            <el-form-item label="负责人" prop="ownerUserId" class="owner-item">
              <div class="owner-content">
                <!-- 左侧部门树 -->
                <div class="dept-tree-wrapper">
                  <div class="tree-header">
                    <Icon icon="ep:office-building" class="tree-icon" />
                    <span class="tree-title">部门结构</span>
                  </div>
                  <div class="tree-container">
                    <DeptTree
                      @node-click="handleDeptNodeClick"
                      ref="deptThree"
                      :show-checkbox="true"
                      @current-change="currentChange"
                      class="enhanced-tree"
                    />
                  </div>
                </div>

                <!-- 右侧用户列表 -->
                <div class="user-list-wrapper">
                  <!-- 搜索区域 -->
                  <div class="search-wrapper">
                    <el-form
                      :model="tableQueryParams"
                      ref="tableQueryFormRef"
                      :inline="true"
                      label-position="left"
                      class="search-form"
                    >
                      <el-form-item label="用户昵称" prop="nickname" class="search-item">
                        <div class="input-wrapper">
                          <Icon icon="ep:user" class="input-icon" />
                          <el-input
                            v-model="tableQueryParams.nickname"
                            placeholder="请输入用户昵称"
                            @keyup.enter="getList"
                            clearable
                            class="enhanced-input"
                          />
                        </div>
                      </el-form-item>

                      <el-form-item label="登陆账号" prop="username" class="search-item">
                        <div class="input-wrapper">
                          <Icon icon="ep:key" class="input-icon" />
                          <el-input
                            v-model="tableQueryParams.username"
                            placeholder="请输入登陆账号"
                            @keyup.enter="getList"
                            clearable
                            class="enhanced-input"
                          />
                        </div>
                      </el-form-item>

                      <el-form-item class="search-actions">
                        <div class="search-buttons">
                          <el-button @click="getList" class="search-btn">
                            <Icon icon="ep:search" class="btn-icon" />
                            搜索
                          </el-button>
                          <el-button @click="resetTableQuery" class="reset-btn">
                            <Icon icon="ep:refresh" class="btn-icon" />
                            重置
                          </el-button>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>

                  <!-- 用户表格 -->
                  <div class="table-wrapper">
                    <el-table
                      v-loading="loading"
                      :data="list"
                      ref="multipleTable"
                      @selection-change="handleSelectionChange"
                      :row-key="rowKey"
                      border
                      class="enhanced-table"
                      :height="380"
                    >
                      <el-table-column type="selection" width="55" :reserve-selection="true">
                        <template #header>
                          <Icon icon="ep:select" class="selection-icon" />
                        </template>
                      </el-table-column>

                      <el-table-column label="用户昵称" align="center" prop="nickname">
                        <template #default="scope">
                          <div class="user-cell">
                            <Icon icon="ep:user" class="user-icon" />
                            <span class="user-name">{{ scope.row.nickname }}</span>
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        label="登陆账号"
                        align="center"
                        prop="username"
                        :show-overflow-tooltip="true"
                      >
                        <template #default="scope">
                          <div class="username-cell">
                            <Icon icon="ep:key" class="username-icon" />
                            <span class="username-text">{{ scope.row.username }}</span>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <div class="pagination-wrapper">
                      <Pagination
                        v-model:limit="tableQueryParams.PageSize"
                        v-model:page="tableQueryParams.pageNo"
                        :total="total"
                        @pagination="getList"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>

          <!-- 分配配置 -->
          <div class="config-section">
            <div class="section-header">
              <Icon icon="ep:setting" class="section-icon" />
              <span class="section-title">分配配置</span>
            </div>

            <div class="config-content">
              <!-- 分配方式 -->
              <el-form-item label="分配方式" v-if="!formData.id" required class="config-item">
                <div class="select-wrapper">
                  <Icon icon="ep:sort" class="select-icon" />
                  <el-select
                    v-model="formData.orderType"
                    class="enhanced-select"
                    placeholder="请选择分配方式"
                  >
                    <el-option
                      v-for="item in userOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>

              <el-form-item label="分配方式" v-else class="config-item">
                <div class="select-wrapper">
                  <Icon icon="ep:sort" class="select-icon" />
                  <el-select
                    v-model="allocationMethod"
                    class="enhanced-select"
                    placeholder="请选择分配方式"
                  >
                    <el-option
                      v-for="item in userOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </el-form-item>

              <!-- 可分配数量 -->
              <el-form-item label="可分配置：" v-if="!formData.id" class="config-item">
                <div class="count-info">
                  <div class="count-value">
                    <Icon icon="ep:document-copy" class="count-icon" />
                    <span class="count-number">{{ nowClueTotal }}</span>
                    <span class="count-unit">条</span>
                  </div>
                  <el-tooltip
                    content="即公海中当前剩余待分配的总数"
                    placement="bottom"
                    effect="light"
                  >
                    <Icon icon="ep:info-filled" class="info-icon" />
                  </el-tooltip>
                </div>
              </el-form-item>

              <!-- 分配上限 -->
              <el-form-item class="config-item" label="本次分配上限" v-if="!formData.id" required>
                <div class="number-wrapper">
                  <Icon icon="ep:sort" class="number-icon" />
                  <el-input-number
                    v-model="formData.size"
                    :min="0"
                    :max="nowClueTotal > 10000 ? 10000 : nowClueTotal"
                    class="enhanced-number"
                    placeholder="请输入分配数量"
                  />
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" class="cancel-btn">
          <Icon icon="ep:close" class="btn-icon" />
          取消
        </el-button>
        <el-button :disabled="formLoading" type="primary" @click="submitForm" class="confirm-btn">
          <Icon icon="ep:check" class="btn-icon" />
          确定
        </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import * as CustomerApi from '@/api/crm/customer'
import * as UserApi from '@/api/system/user'
import { distributeCustomer } from '@/api/crm/customer'
import DeptTree from '@/views/system/user/DeptTree.vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { emitter } from '@/utils/eventBus.ts'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const userOptions = ref([
  { name: '顺序分配', id: 1 },
  { name: '倒序分配', id: 2 }
])
const formData = ref({
  size: '',
  orderType: '',
  id: undefined,
  ownerUserId: undefined
})
const allocationMethod = ref(1)
const multipleTable = ref(null)
const rowKey = (row) => {
  return row.id
}
const deptThree = ref(null)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 50,
  deptId: ''
})
const formRef = ref() // 表单 Ref
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserPage(tableQueryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

// 部门列表
const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  await getList()
}
// 树形选择 右侧的表格选中
const currentChange = (checkNodes, value) => {
  const checkedKeysArr = value.checkedKeys
  if (checkedKeysArr.length) {
    list.value.forEach((row) => {
      if (checkedKeysArr.indexOf(row.deptId) != -1) {
        multipleTable.value.toggleRowSelection(row, true)
      } else {
        multipleTable.value.toggleRowSelection(row, false)
      }
    })
  } else {
    multipleTable.value.clearSelection()
  }
}
const multipleSelection = ref(null)
//表格选择 左边树形结构选中
const handleSelectionChange = (row) => {
  let deptIdArr = []
  let idArr = []
  deptIdArr = row.map((item) => item.deptId)
  idArr = row.map((item) => item.id)
  deptThree.value.setCheckedKeys(deptIdArr)
  multipleSelection.value = idArr
}

const nowClueTotal = ref(0)
const nowModuleId = ref('')
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([])
/** 打开弹窗 */
const open = async (arrId, total, moduleId) => {
  dialogVisible.value = true
  resetForm()
  if (arrId && arrId.length) {
    formData.value.id = arrId
  } else {
    nowClueTotal.value = total
    nowModuleId.value = moduleId
  }
  getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const tableQueryParams = reactive({
  nickname: undefined,
  username: undefined,
  pageNo: 1,
  PageSize: 100
})
const tableQueryFormRef = ref()

/** 重置按钮操作 */
const resetTableQuery = () => {
  tableQueryFormRef.value.resetFields()
  getList()
}
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  if (!multipleSelection.value || multipleSelection.value.length == 0) {
    ElMessage.warning('请选择负责人')
    return
  }
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    if (formData.value.id) {
      let obj = {
        ids: formData.value.id,
        ownerUserIdList: multipleSelection.value
      }
      await CustomerApi.assignCustomers(obj)
    } else {
      if (formData.value.orderType == '') {
        message.warning('请选择分配方式')
        return
      }
      let obj = {
        ownerUserIdList: multipleSelection.value,
        size: formData.value.size,
        orderType: formData.value.orderType,
        moduleId: nowModuleId.value || ''
      }
      await CustomerApi.assignCustomersNum(obj)
    }

    message.success('分配客户成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
    emitter.emit('refreshCustomer')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    size: '',
    orderType: '',
    id: undefined,
    ownerUserId: undefined
  }
  formRef.value?.resetFields()
}
</script>

<style lang="scss" scoped>
.customer-distribute-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 95% !important;
      margin: 10px auto;
      max-height: 95vh;
    }
  }

  :deep(.el-dialog__header) {
    display: none;
  }

  :deep(.el-dialog__body) {
    padding: 0;
    max-height: 80vh;
    overflow-y: auto;
  }

  :deep(.el-dialog__footer) {
    padding: 0;
    border-top: 1px solid #e5e7eb;
  }
}

.dialog-content {
  background: #f8fafc;
}

/* 对话框头部 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  border-radius: 10px;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.dialog-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 表单容器 */
.form-container {
  background: white;
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.enhanced-form {
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
    font-size: 14px;

    @media (max-width: 768px) {
      font-size: 13px;
    }
  }
}

/* 区域样式 */
.owner-section,
.config-section {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;

  @media (max-width: 768px) {
    margin-bottom: 16px;
    padding: 16px;
  }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #0052cc;
}

.section-icon {
  color: #0052cc;
  font-size: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

/* 负责人选择区域 */
.owner-item {
  margin-bottom: 0;

  :deep(.el-form-item__content) {
    width: 100%;
  }
}

.owner-content {
  display: flex;
  gap: 20px;
  width: 100%;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
  }
}

/* 部门树 */
.dept-tree-wrapper {
  flex: 0 0 300px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;

  @media (max-width: 768px) {
    flex: none;
    width: 100%;
  }
}

.tree-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.tree-icon {
  color: #0052cc;
  font-size: 16px;
}

.tree-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.tree-container {
  padding: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.enhanced-tree {
  :deep(.el-tree-node__content) {
    padding: 8px 0;
    border-radius: 4px;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(0, 82, 204, 0.05);
    }
  }

  :deep(.el-tree-node__label) {
    font-size: 13px;
    color: #374151;
  }

  :deep(.el-checkbox__inner) {
    border-radius: 4px;
  }
}

/* 用户列表 */
.user-list-wrapper {
  flex: 1;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

/* 搜索区域 */
.search-wrapper {
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.search-form {
  .search-item {
    margin-bottom: 0;
    margin-right: 20px;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #374151;
      font-size: 14px;
      width: 80px;
    }

    @media (max-width: 768px) {
      margin-right: 0;
      margin-bottom: 12px;
      width: 100%;

      :deep(.el-form-item__label) {
        width: 60px;
      }
    }
  }

  .search-actions {
    margin-bottom: 0;

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

/* 输入框样式 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-icon {
  position: absolute;
  left: 12px;
  color: #6b7280;
  font-size: 16px;
  z-index: 1;
}

.enhanced-input {
  width: 220px;

  :deep(.el-input__wrapper) {
    padding-left: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    min-height: 40px;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }

  :deep(.el-input__inner) {
    font-size: 14px;

    @media (max-width: 768px) {
      font-size: 16px; // 防止iOS缩放
    }
  }

  @media (max-width: 768px) {
    width: 100%;
  }
}

.search-buttons {
  display: flex;
  gap: 8px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.search-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  color: white;
  font-size: 14px;

  @media (max-width: 768px) {
    flex: 1;
  }

  .btn-icon {
    margin-right: 4px;
  }
}

.reset-btn {
  border: 1px solid #e5e7eb;
  color: #6b7280;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    flex: 1;
  }

  .btn-icon {
    margin-right: 4px;
  }
}

/* 表格区域 */
.table-wrapper {
  padding: 16px;
}

.enhanced-table {
  border-radius: 8px;
  overflow: hidden;

  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
      font-size: 13px;
    }
  }

  :deep(.el-table__row) {
    &:hover {
      background: rgba(0, 82, 204, 0.02) !important;
    }
  }

  :deep(.el-table__cell) {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
  }

  @media (max-width: 768px) {
    :deep(.el-table__cell) {
      padding: 8px 4px;
      font-size: 12px;
    }
  }
}

.selection-icon {
  color: #0052cc;
  font-size: 14px;
}

.user-cell,
.username-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-icon,
.username-icon {
  font-size: 14px;
  color: #0052cc;
  flex-shrink: 0;
}

.user-name,
.username-text {
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}

/* 分页 */
.pagination-wrapper {
  padding: 16px 0 0 0;
  display: flex;
  justify-content: center;

  :deep(.el-pagination) {
    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 配置区域 */
.config-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.config-item {
  margin-bottom: 0;

  :deep(.el-form-item__content) {
    width: 100%;
  }
}

/* 选择框样式 */
.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.select-icon {
  position: absolute;
  left: 12px;
  color: #6b7280;
  font-size: 16px;
  z-index: 1;
}

.enhanced-select {
  width: 100%;

  :deep(.el-input__wrapper) {
    padding-left: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    min-height: 40px;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }

  :deep(.el-input__inner) {
    font-size: 14px;

    @media (max-width: 768px) {
      font-size: 16px; // 防止iOS缩放
    }
  }

  :deep(.el-input__suffix) {
    right: 12px;
  }
}

/* 数量信息 */
.count-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.count-value {
  display: flex;
  align-items: center;
  gap: 6px;
}

.count-icon {
  color: #0284c7;
  font-size: 16px;
}

.count-number {
  font-size: 18px;
  font-weight: 600;
  color: #0284c7;
}

.count-unit {
  font-size: 14px;
  color: #0284c7;
}

.info-icon {
  color: #6b7280;
  font-size: 16px;
  cursor: help;
  transition: all 0.2s ease;

  &:hover {
    color: #0052cc;
    transform: scale(1.1);
  }
}

/* 数字输入框 */
.number-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.number-icon {
  position: absolute;
  left: 12px;
  color: #6b7280;
  font-size: 16px;
  z-index: 1;
}

.enhanced-number {
  width: 100%;

  :deep(.el-input__wrapper) {
    padding-left: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    min-height: 40px;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }

  :deep(.el-input__inner) {
    font-size: 14px;

    @media (max-width: 768px) {
      font-size: 16px; // 防止iOS缩放
    }
  }
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  background: white;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    gap: 8px;
  }
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  background: white;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-height: 40px;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    width: 100%;
    order: 2;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.confirm-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  color: white;
  transition: all 0.2s ease;
  min-height: 40px;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  @media (max-width: 768px) {
    width: 100%;
    order: 1;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 加载状态优化 */
:deep(.el-loading-mask) {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
}

:deep(.el-loading-spinner) {
  .circular {
    width: 32px;
    height: 32px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .dialog-content {
    background: #1f2937;
  }

  .form-container {
    background: #374151;
  }

  .owner-section,
  .config-section {
    background: #4b5563;
    border-color: #6b7280;
  }

  .section-title {
    color: #f9fafb;
  }

  .section-header {
    border-color: #60a5fa;
  }

  .section-icon {
    color: #60a5fa;
  }

  .dept-tree-wrapper,
  .user-list-wrapper {
    background: #4b5563;
    border-color: #6b7280;
  }

  .tree-header,
  .search-wrapper {
    background: #374151;
    border-color: #6b7280;
  }

  .tree-title {
    color: #f9fafb;
  }

  .enhanced-input,
  .enhanced-select,
  .enhanced-number {
    :deep(.el-input__wrapper) {
      background: #4b5563;
      border-color: #6b7280;

      .el-input__inner {
        color: #f9fafb;
      }
    }
  }

  .input-icon,
  .select-icon,
  .number-icon {
    color: #d1d5db;
  }

  .enhanced-table {
    :deep(.el-table__header) {
      background: #4b5563;

      th {
        background: #4b5563 !important;
        color: #f9fafb;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
    }
  }

  .user-name,
  .username-text {
    color: #f9fafb;
  }

  .count-info {
    background: #1e3a8a;
    border-color: #3b82f6;
  }

  .count-icon,
  .count-number,
  .count-unit {
    color: #60a5fa;
  }

  .dialog-footer {
    background: #374151;
  }

  .enhanced-form {
    :deep(.el-form-item__label) {
      color: #f9fafb;
    }
  }

  .search-form {
    .search-item {
      :deep(.el-form-item__label) {
        color: #f9fafb;
      }
    }
  }

  :deep(.el-loading-mask) {
    background: rgba(55, 65, 81, 0.9);
  }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
  .enhanced-input,
  .enhanced-select,
  .enhanced-number {
    :deep(.el-input__wrapper) {
      border: 2px solid #0052cc;
      box-shadow: none;

      &:hover,
      &.is-focus {
        border-color: #1d4ed8;
        box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
      }
    }
  }

  .dept-tree-wrapper,
  .user-list-wrapper {
    border: 2px solid #e5e7eb;
  }

  .cancel-btn {
    border: 2px solid #6b7280;
  }

  .confirm-btn {
    background: #0052cc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

/* 减少动画模式适配 */
@media (prefers-reduced-motion: reduce) {
  .enhanced-input,
  .enhanced-select,
  .enhanced-number,
  .cancel-btn,
  .confirm-btn,
  .search-btn,
  .reset-btn,
  .info-icon {
    transition: none;
  }

  .confirm-btn {
    &:hover {
      transform: none;
    }
  }

  .info-icon {
    &:hover {
      transform: none;
    }
  }

  .enhanced-tree {
    :deep(.el-tree-node__content) {
      transition: none;
    }
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .enhanced-input,
  .enhanced-select,
  .enhanced-number {
    :deep(.el-input__wrapper) {
      min-height: 44px;
    }
  }

  .cancel-btn,
  .confirm-btn,
  .search-btn,
  .reset-btn {
    min-height: 44px;
    padding: 12px 20px;
  }

  .enhanced-tree {
    :deep(.el-tree-node__content) {
      min-height: 44px;
    }
  }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
  .dialog-header {
    padding: 12px;
  }

  .form-container {
    padding: 12px;
  }

  .owner-section,
  .config-section {
    padding: 12px;
    margin-bottom: 12px;
  }

  .dialog-footer {
    padding: 12px;
  }

  .search-wrapper,
  .table-wrapper {
    padding: 12px;
  }

  .config-content {
    gap: 12px;
  }
}

/* 横屏模式适配 */
@media (max-width: 768px) and (orientation: landscape) {
  .dialog-header {
    padding: 12px 16px;
    flex-direction: row;
    text-align: left;
  }

  .form-container {
    padding: 16px;
  }

  .owner-content {
    flex-direction: row;
  }

  .dept-tree-wrapper {
    flex: 0 0 250px;
  }

  .config-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .search-form {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .search-item {
    width: auto !important;
    margin-right: 16px !important;
    margin-bottom: 8px !important;
  }
}
</style>
